<template>
    <div class="top-nav">
      <div class="top-title" id="ccc">
        <van-row type="flex" align="center">
          <van-col span="4"><van-icon @click="$router.go(-1)" name="arrow-left"></van-icon></van-col>
          <van-col span="16">{{title}}
            <div class="slot-info"><slot></slot></div>
          </van-col>
          <van-col span="4"></van-col>
        </van-row>
      </div>
      <div class="space"></div>
    </div>
</template>

<script>
    export default {
      name: "topNav",
      props: ['title']
    }
</script>

<style lang="less" scoped>
  .top-nav{
    text-align: center;
   .top-title{
     color: #fff;
     display: flex;
     align-items: center;
     position: fixed;
     left: 0;
     top: 0;
     z-index: 999;
     width: 100%;
     height: 50px;
     background-color: #fff;
     font-weight: bold;
     color: #000;
     box-shadow: 1px 2px 5px rgba(128,128,128,.2);
     .van-row{
       width: 100%;
     }
     i{
       margin-top: 10px;
       font-weight: bold;
       font-size: 18px;
     }
   }
    .space{
      height: 50px;
    }
    .slot-info{
      font-size: 8px;
    }
  }
</style>
